<template>
  <el-container class="aqi-container">
    <el-header class="navbar">
      <div class="navbar-inner">
        <div class="left">
          <el-page-header title=" ">
            <template #icon>
              <el-icon @click="back"><ArrowLeftBold /></el-icon>
            </template>
            <template #content>
              <span class="text">选择AQI</span>
            </template>
          </el-page-header>
        </div>
      </div>
    </el-header>
    <el-main class="main">
      <el-table :data="pollutionData" border style="width: 100%" :row-style="tableRowStyle">
        <!-- 空气质量等级 -->
        <el-table-column min-width="13" prop="level_id" />
        <!-- 优、良、轻度污染等级 -->
        <el-table-column min-width="25" prop="describe" label="质量等级" />
        <!-- 详细信息 -->
        <el-table-column prop="remark" label="具体描述" />
      </el-table>

      <el-card class="card" style="margin-top: 30px;">
        <div class="title">请预估当前空气质量指数等级：</div>
        <el-radio-group v-model="selectedAQILevel" class="custom-radio-group">
          <el-radio value="1" class="selectAQI">
            <div class="level" style="background-color: #1be21f;">一</div>
          </el-radio>
          <el-radio value="2" class="selectAQI">
            <div class="level" style="background-color: #dddd23;">二</div>
          </el-radio>
          <el-radio value="3" class="selectAQI">
            <div class="level" style="background-color: #fc8016;">三</div>
          </el-radio>
          <el-radio value="4" class="selectAQI">
            <div class="level" style="background-color: #f5150d;">四</div>
          </el-radio>
          <el-radio value="5" class="selectAQI">
            <div class="level" style="background-color: #970c4d;">五</div>
          </el-radio>
          <el-radio value="6" class="selectAQI">
            <div class="level" style="background-color: #5e041a;">六</div>
          </el-radio>
        </el-radio-group>
      </el-card>

      <el-card class="card">
        <div class="title">请填写反馈信息：</div>
        <el-input type="textarea" v-model="feedback" placeholder="请填写反馈信息" rows="4"></el-input>
      </el-card>

      <el-button type="primary" class="aqi-button" @click="submitFormNext">提交</el-button>
    </el-main>
  </el-container>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import axios from '@/utils/axiosUtils';
import { ArrowLeftBold } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router';
let router = useRouter()
let route = useRoute()
let pollutionData = reactive([])
let selectedAQILevel = ref(null)
let feedback = ref(null)
let user = reactive({})
function parseJWT(token) {
  // 分割JWT的三个部分
  let parts = token.split('.');
  let base64Url = parts[1];
  let rawData = atob(base64Url.replace(/-/g, '+').replace(/_/g, '/')); // 替换URL安全的字符
  let decoder = new TextDecoder('utf-8');
  let payload = JSON.parse(decoder.decode(new Uint8Array(rawData.split('').map(c => c.charCodeAt(0)))));
  return payload;
}
let token = sessionStorage.getItem("token")
user=parseJWT(token)
let now = new Date()
let getDate = function(now){
  let year = now.getFullYear();
  let month = String(now.getMonth() + 1).padStart(2, '0');
  let day = String(now.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`
}
let back = function(){
  router.push({path:"/selectGrid"})
}
let getPollutionData = function(){
  axios.get("http://localhost:7000/service-neps/supervisor/getLevelMsg").then(res=>{
    pollutionData.splice(0,pollutionData.length,...res.data);
    console.log(res.data)
  })
}
const tableRowStyle = (row) => {
    return row.rowIndex % 2 === 0 ? 
        { background: 'rgba(255, 255, 255, 1)' } : 
        { background: 'rgba(150, 175, 197, 0.15)' };
};

let submitFormNext = function(){
  axios.post("http://localhost:7000/service-neps/supervisor/addMesg",{
    province : route.query.province,
    city : route.query.city,
    address : route.query.address,
    level : selectedAQILevel.value,
    message : feedback.value,
    supervisor_phone : user.phoneNumber,
    date : getDate(now),
    time : now.toLocaleTimeString(),
    status : 0
  }).then(res=>{
    if(res.data==1){
      ElMessage({
        message:"提交成功",
        type:"success"
      })
      router.push({path:"/feedbackList"})
    }else{
      ElMessage({
        message:"提交失败",
        type:"error"
      })
    }
  })
}

onMounted(()=>{
  getPollutionData()
})
</script>

<style scoped>
.aqi-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url('@/assets/kongjing2.jpg') no-repeat center center;
  background-size: cover;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to right, #96afc5, #96afc3); /* 使用渐变色 */
  color: white;
  padding: 10px;
  width: 100%;
}

.navbar-inner {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.main {
  display: flex;
  flex-direction: column; /* 设置为列方向 */
  align-items: center; /* 垂直居中 */
  width: 100%; /* 确保卡片宽度 */
  margin-bottom: 20px; /* 调整表格和卡片之间的间距 */
}

.card {
  margin-bottom: 30px;
  max-width: 385px;
  border-radius: 8px;
  width: 100%; /* 确保卡片宽度 */
}

.card .title {
  margin-bottom: 15px; /* 调整标题和输入框之间的下方间距 */
}

.custom-radio-group {
  display: flex;
  flex-wrap: wrap;
}

.custom-radio {
  margin: -2px; /* 调整单个单选框的间距 */
  padding: 3px 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.aqi-button {
  width: 100%;
  height: 40px;
  font-size: 17px;
  background: linear-gradient(to right, #b79b51, #b89535);
  border-color: transparent;
  letter-spacing: 5px; /* 添加字母间距 */
}

.aqi-button:hover {
  background: linear-gradient(to right, #ba9632, #bb9327);
}

.level-wrapper {
  display: flex;
  align-items: center;
}

.level {
  width: 20px;
  height: 20px;
  color: white;
  border-radius: 5px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.selectAQI {
  margin: 0;
  margin-right: 15px;
}

.el-table__row.statistics-warning-row .cell {
  background-color: green;
}

.el-table {
    --el-table-row-hover-bg-color: rgba(168, 239, 179, 0.797);
}

</style>
